.header {
    z-index: 100;
    width: 100vw;
    height: 64px;
    background-color: var(--bg);
    border-bottom: 1px solid var(--border-color);
}
.link{
  color:  var(--main-text-color);
}
.header>div {
    display: flex;
    align-items: center;
    height: 100%;

}

.header .logo {
    height: 64px;
    margin-right: 4rem;
    color: var(--main-text-color);
    line-height: 64px;
    text-align: left;
}

.header .logo img {
    display: inline-block;
    height: 36px;
}

.header nav {
    flex: 1;
    color: var(--main-text-color);
    font-size: 16px;
    height: 64px;
}

.header nav ul {
    width: 100%;
    height: 100%;
}

.header nav ul li {
    display: inline-flex;
    padding: 0 20px;
    vertical-align: middle;
    line-height: 64px;
}

.header nav ul .uli {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    font-style: 24px;
    cursor: pointer;
}
.search{
    width: 24px;
    height: 24px;
    align-items: center;
    line-height: 24px;
}
.search svg{
    width: 24px;
    height: 24px;
}
.bak{
    position: relative;
    height: 24px;
    width: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bak .span_1{
    position: absolute;
    border-radius: 50%;
    top: 0;
    right: 0;
    transform: scale(0) translate(-100%,35%);
    z-index: 9;
    transition: transform .4s;
    transform-origin: right;
    background: var(--sun-color);
}
.bak .span_2{
    position: relative;
    z-index: 3;
    background: var(--sun-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--bg);
}
.bak .small{
    width: 2px;
    background: var(--sun-color);
    display: block;
    height: 125%;
    position: absolute;
    z-index: 2;
    transition: all .4s,height .3s ease-in-out;
}
.bak .small:nth-child(3) {
    transform: rotate(calc(3 * calc(1turn / 12)));
}
.bak .small:nth-child(4) {
    transform: rotate(calc(4 * calc(1turn / 12)));
}
.bak .small:nth-child(5) {
    transform: rotate(calc(5 * calc(1turn / 12)));
}
.bak .small:nth-child(6) {
    transform: rotate(calc(6 * calc(1turn / 12)));
}
.bak .small:nth-child(7) {
    transform: rotate(calc(7 * calc(1turn / 12)));
}
.bak .small:nth-child(8) {
    transform: rotate(calc(8 * calc(1turn / 12)));
}
.svga {
    align-items: center;
    width: 24px;
    height: 24px;
    display:flex;
    line-height:24px;
}

.svga svg {
    line-height: 64px;
    width: 24px;
    height: 24px;
}
